/* ------------------------------------------------------------------------------
*
*  # Heading elmeents
*
*  Display default and custom components in page header and panel heading
*
*  Version: 1.3
*  Latest update: Aug 10, 2016
*
* ---------------------------------------------------------------------------- */

// Base
// -------------------------

// Heading elements toggler
.heading-elements-toggle {
  cursor: pointer;
  display: block;
  line-height: 1;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -(@icon-font-size / 2);
}

// Breadcrumb toggler position
.breadcrumb-elements-toggle {
  float: right;
  cursor: pointer;
  line-height: 1;
  margin-top: ((((@breadcrumb-padding-vertical * 2) + @line-height-computed) - @icon-font-size) / 2);

  // Stand alone component
  .breadcrumb-line-component & {
    margin-right: @grid-gutter-width;
  }
}

// Common styles for togglers
.heading-elements-toggle,
.breadcrumb-elements-toggle {

  // Inherit colors
  &,
  &:hover,
  &:focus {
    color: inherit;
  }

  // Remove top edge frop icons
  > i {
    top: 0;
  }

  // Hide on desktop
  @media (min-width: @screen-sm-min) {
    display: none;
  }
}

// Heading elements base
.heading-elements {
  background-color: inherit;
  position: absolute;
  top: 50%;
  right: @grid-gutter-width;
  height: @input-height-base;
  margin-top: -(@input-height-base / 2);

  // Mobile view
  @media (max-width: @screen-xs-max) {
    &:not(.not-collapsible) {
      position: static;
      margin-top: 0;
      height: auto;
    }
  }
}

//
// Inside panel
//

// Inside panel body
.panel-body {
  > .heading-elements {
    top: 0;
    margin-top: (@input-height-base - @content-padding-large - 2);
    z-index: 10;
  }

  // Mobile view
  @media (max-width: @screen-xs-max) {
    > .heading-elements-toggle {
      top: @panel-body-padding;
      margin-top: 0;
    }

    > .heading-elements.visible-elements {
      top: ((@panel-body-padding * 2) + @icon-font-size);
      background-color: @panel-bg;
    }
  }
}

// Inside panel footer
.panel-footer {
  > .heading-elements {
    position: static;
    margin-top: 0;
    padding-right: @content-padding-large;

    // Clear floats
    &:after {
      content: '';
      display: table;
      clear: both;
    }
  }

  // Inside bordered panel footer
  &-bordered {
    > .heading-elements:not(.visible-elements) {
      margin-left: -(@content-padding-large);
      padding-right: 0;
    }
  }

  // Mobile view
  @media (max-width: @screen-xs-max) {
    > .heading-elements:not(.not-collapsible) > .pull-right {
      float: none !important;
    }

    // Toggle button
    .heading-elements-toggle {
      position: static;
      padding-top: @content-padding-small;
      padding-bottom: @content-padding-small;
      margin-top: 0;
      display: block;
      text-align: center;
    }
  }
}

//
// Heading thumbnails
//

.heading-thumbnails {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0;

  // Items
  > li {
    position: relative;
    display: inline-block;
    font-size: @font-size-base;

    // Multiple items
    + li {
      margin-left: 10px;
    }

    // Images
    img {
      height: auto;
      max-height: @input-height-base;
      max-width: 100%;
      border-radius: 100px;
    }

    // Labels and badges
    .label,
    .badge {
      position: absolute;
      top: -8px;
      right: -8px;
      border: 2px solid @panel-footer-bg;

      // Inside transparent panel footer
      .panel-default > .panel-heading &,
      .panel-footer-transparent & {
        border-color: @panel-bg;
      }
    }

    // Status mark
    .status-mark {
      position: absolute;
      top: 0;
      right: 0;
      box-shadow: 0 0 0 2px @panel-footer-bg;

      // Add background color if circle
      &[class*=border-] {
        background-color: @panel-footer-bg;

        // Inside transparent panel footer
        .panel-default > .panel-heading &,
        .panel-footer-transparent & {
          background-color: @panel-bg;
        }
      }

      // Inside transparent panel footer
      .panel-default > .panel-heading &,
      .panel-footer-transparent & {
        background-color: @panel-bg;
      }
    }
  }
}

// Elements
// -------------------------

.heading-elements {

  // Element's horizontal spacing
  .heading-btn + .heading-btn,
  .page-header & .icons-list > li + li,
  .thumbnail-heading & .icons-list > li + li {
    margin-left: (@content-padding-large / 2);
  }

  // Button link inside dark page header
  .page-header-inverse & {
    .btn-link {
      color: #fff;
    }
  }

  // List
  .list-inline {
    margin-bottom: 0;
  }

  // Breadcrumb inside page header
  .breadcrumb {
    padding-top: 0;
    padding-bottom: 0;
  }

  // Align text left in panel tabs/pills
  &.panel-nav {
    .nav > li > a {
      text-align: left;
    }
  }

  // Custom date range display
  .daterange-custom {
    margin-top: ((@input-height-base - 28px) / 2); // half of elements general height - font size
  }

  // Button group
  .heading-btn-group {
    font-size: 0;

    > .btn + .btn:not(.btn-link) {
      margin-left: (@content-padding-large / 2);
    }
  }

  // Hide elements on mobile, but display them
  // when toggle button is clicked
  &.visible-elements {
    text-align: center;

    // Add vertical spacing
    .heading-text,
    .heading-btn,
    .heading-btn-group > .btn,
    .ui-slider,
    .noui-slider,
    .nav-tabs,
    .nav-pills,
    .pagination,
    .progress,
    .icons-list,
    .pager,
    .breadcrumb,
    .daterange-custom,
    .heading-thumbnails,
    .heading-form .form-group,
    > .btn-group {
      margin-top: @line-height-computed;
    }

    // Remove bottom margin from tabs/pills
    .nav-tabs,
    .nav-pills {
      margin-bottom: 0;
    }

    // Heading text
    .heading-text:not(.label):not(.badge) {
      display: block;
    }

    // Make selects full width
    .select2-container,
    .selectboxit-container,
    .selectboxit-options,
    .multiselect + .btn-group,
    div.bootstrap-select {
      width: 100% !important;
    }

    // Static position
    .input-group,
    .input-group-btn,
    .btn-group,
    .dropdown,
    .dropup {
      position: static;
    }

    // Make dropdown menus full width
    .dropdown-menu:not(.multiselect-container) {
      left: -1px;
      right: -1px;
      margin-top: 0;
      .border-top-radius(0);
    }

    // Multiselect container is not full width
    .multiselect-container {
      left: 0;
      right: 0;
    }
  }

  // Make them visible-elements starting from tablet
  // or on mobile if container is not collapsible
  &:not(.visible-elements) {

    // Make them inline
    .heading-text,
    .heading-btn,
    .ui-slider,
    .noui-slider,
    .nav-tabs,
    .nav-pills,
    .pagination,
    .progress,
    .icons-list,
    .breadcrumb,
    .pager,
    .heading-form,
    .daterange-custom,
    .heading-thumbnails,
    > .btn-group {
      float: left;
      margin-left: @content-padding-large;
    }

    // Heading text
    .heading-text {
      display: inline-block;

      & + .heading-text {
        margin-left: @content-padding-large;
      }
    }

    // Elements width
    .selectbox-fixed + .selectboxit-container,
    .selectbox-fixed + .selectboxit-options,
    .progress,
    .ui-slider,
    .noui-slider,
    .input-group,
    .selectboxit-container .selectboxit-options,
    .uploader,
    .heading-form .form-control {
      width: 220px;
    }

    // Elements sizes spacing
    // ------------------------------

    // Small elements corrections
    .select-sm,
    .input-sm,
    .input-group-sm,
    .uploader-sm,
    .pagination-sm,
    .pager-sm,
    .selectbox-sm + .selectboxit-container,
    .btn-sm,
    .btn-group-sm > .btn {
      margin-top: (@input-height-base - @input-height-small) / 2;
    }

    // Mini elements corrections
    .select-xs,
    .input-xs,
    .input-group-xs,
    .uploader-xs,
    .pagination-xs,
    .pager-xs,
    .selectbox-xs + .selectboxit-container,
    .btn-xs,
    .btn-group-xs > .btn {
      margin-top: (@input-height-base - @input-height-mini) / 2;
    }

    // Floating buttons
    .btn-float {
      margin-top: (((@input-height-base - ((@btn-float-padding * 2) + @icon-font-size + 2)) / 2) - 1); // Difference between base height and button height

      // If has text
      &.has-text {
        margin-top: (((@input-height-base - ((@btn-float-padding * 2) + @icon-font-size + @line-height-computed + 5)) / 2) - 1); // Difference between base height and button height with text
      }

      // If float link
      &.btn-link {
        margin-top: (((@input-height-base - (@icon-font-size + @line-height-computed + (@btn-float-padding * 2) - 6)) / 2) - 1);
      }
    }

    // Sliders
    .ui-slider,
    .noui-slider {
      margin-top: ((@input-height-base - @slider-base-size) / 2);

      &-lg {
        margin-top: ((@input-height-base - @slider-large-size) / 2);
      }

      &-sm {
        margin-top: ((@input-height-base - @slider-small-size) / 2);
      }

      &-xs {
        margin-top: ((@input-height-base - @slider-mini-size) / 2);
      }
    }

    // Progress bars
    .progress {
      margin-top: ((@input-height-base - @progress-base-height) / 2);

      // Large
      &-lg {
        margin-top: ((@input-height-base - @progress-large-height) / 2);
      }

      // Small
      &-sm {
        margin-top: ((@input-height-base - @progress-small-height) / 2);
      }

      // Mini
      &-xs {
        margin-top: ((@input-height-base - @progress-mini-height) / 2);
      }

      // Tiny
      &-xxs {
        margin-top: ((@input-height-base - @progress-tiny-height) / 2);
      }

      // Micro
      &-micro {
        margin-top: ((@input-height-base - @progress-micro-height) / 2);
      }
    }

    // Icons list
    .icons-list {
      margin-top: ((@input-height-base - @icon-font-size) / 2);
    }

    // Text
    .heading-text {
      margin-top: ((@input-height-base - @line-height-computed) / 2);
    }

    // Panel navs
    &.panel-nav {

      // Navs
      > .nav {
        margin-bottom: 0;
      }

      // Desktop view
      @media (min-width: @screen-sm-min) {

        // Navs
        > .nav {
          margin-top: ((@input-height-base - (((@padding-base-vertical + 2) * 2) + @line-height-computed)) / 2);
        }

        // Tabs
        > .nav-tabs {
          border-bottom-width: 0;

          // Remove active state highlight
          &.nav-tabs-bottom > li.active > a:after {
            background-color: transparent;
          }
        }

        // Small pills
        > .nav-sm {
          margin-top: ((@input-height-base - ((@padding-small-vertical * 2) + @line-height-computed)) / 2);
        }

        // Mini pills
        > .nav-xs {
          margin-top: ((@input-height-base - (((@padding-xs-vertical - 2) * 2) + @line-height-computed)) / 2);
        }
      }

      // Mobile view
      @media (max-width: @screen-xs-max) {
        position: static;
        height: auto;

        // Navs
        > .nav {
          float: none;
        }

        // Inside panel heading
        .panel-heading & {
          margin-top: @content-padding-base;

          // Inside flat panel
          .panel-flat & {
            margin-top: @content-padding-large;
          }

          // Navs
          > .nav {
            margin-left: 0;
          }
        }

        // Add vertical margin if container is not collapsible
        .panel-footer &.not-collapsible {
          > .nav {
            margin-top: @line-height-computed - @padding-base-vertical;
            margin-bottom: @line-height-computed - @padding-base-vertical;
          }
        }
      }
    }
  }
}

// Heading form
// -------------------------

.heading-form {

  // Form group
  .form-group {
    margin-bottom: 0;
  }

  // Switchery
  .checkbox-switchery {
    &,
    &[class*="switchery-"] {
      margin-bottom: 0;
    }
  }

  // If container is not collapsible
  .heading-elements:not(.visible-elements) & {

    // Radios and checkboxes
    .checkbox-inline,
    .radio-inline {
      margin-top: ((@input-height-base - @line-height-computed) / 2);
    }

    // Checkbox switch
    .checkbox-switch {

      // Those 2 pixels that are used in Switch styles as negative top margin. In fact, switch height is equal to heading elements container height.
      // They will be added below to calculate the difference
      margin-top: 2px;

      // Small
      &-sm {
        margin-top: ((@input-height-base - @input-height-small) / 2) + 2;
      }

      // Mini
      &-xs {
        margin-top: ((@input-height-base - @input-height-mini) / 2) + 2;
      }
    }

    // Input group
    .input-group {
      max-width: 220px;

      // Inputs
      .form-control {
        width: 100%;
        margin-top: 0;
      }

      // Buttons
      &.input-group-sm .btn,
      &.input-group-xs .btn {
        margin-top: 0;
      }
    }
  }

  // Setup desktop view
  @media (min-width: @screen-sm-min) {

    // Form group
    .form-group {
      float: left;

      // Multiple groups
      & + .form-group {
        margin-left: @content-padding-base;
      }
    }
  }
}

// Toggle elements visibility
// ------------------------------

@media (max-width: @screen-xs-max) {

  // Heading elements
  .heading-elements,
  .breadcrumb-elements {

    // If collapsible
    &:not(.not-collapsible) {
      display: none;
    }

    // Show on click
    &.visible-elements {
      display: block;
    }
  }

  // Visible elements parent container
  .has-visible-elements {

    // All panels
    .panel & {
      padding-bottom: 0;
    }

    // Flat panel
    .panel-flat .panel-heading& {
      padding-bottom: @content-padding-large;
    }
  }

  // Visible elements container
  .visible-elements {

    // Inside panels
    .panel & {
      border-top: 1px solid @panel-default-border;
      padding: @content-padding-large;
      padding-top: 0;
    }

    // Inside panel heading
    .panel-heading & {
      margin: @content-padding-base -(@content-padding-large) 0 -(@content-padding-large);
      background-color: darken(@panel-bg, 1%);

      // In flat panel
      .panel-flat & {
        margin-top: @content-padding-large;
        border-bottom: 1px solid @panel-default-border;
      }
    }

    // Inside panel footer
    .panel-footer & {
      margin-top: @padding-base-vertical;
      .border-bottom-radius(@border-radius-base);
    }

    // Inside condensed panel footer
    .panel-footer-condensed & {
      margin-top: 2px;
    }

    // Inside transparent panel footer
    .panel-footer-transparent & {
      margin-top: @content-padding-large - ((@input-height-base - @line-height-computed) / 2);
      background-color: @panel-bg;
    }

    // Inside colored panels
    .panel[class*=bg-] &,
    .panel-heading[class*=bg-] &,
    .panel-primary &,
    .panel-danger &,
    .panel-success &,
    .panel-warning &,
    .panel-info & {
      border-color: fade(#fff, 20%);
      left: 0;
      right: 0;
      background-color: fade(#000, 10%);
    }

    // Breadcrumb elements
    &.breadcrumb-elements {
      &.not-collapsible {
        display: none;
      }
    }

    // Inside page header
    .page-header-content > & {
      background-color: @body-bg;
      left: 0;
      right: 0;
      border-top: 1px solid darken(@body-bg, 10%);
      z-index: (@zindex-navbar + 2);
      padding-bottom: @line-height-computed;
      margin-left: -(@grid-gutter-width);
      margin-right: -(@grid-gutter-width);
      padding-left: @grid-gutter-width;
      padding-right: @grid-gutter-width;

      // Inside default page header
      .page-header-default & {
        background-color: darken(@page-header-default-bg, 1%);
        border-color: @panel-default-border;
      }

      // Inside inverse page header
      .page-header-inverse & {
        background-color: fade(#000, 10%);
        border-color: fade(#fff, 10%);
      }
    }
  }
}
